<template>
  <div class="home">
    <!-- 滑动验证码 开始 -->
    <div>
      <slide-verify
        :l="42"
        :r="10"
        :w="310"
        :h="155"
        slider-text="向右滑动"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
      ></slide-verify>
      <div>{{ msg }}</div>
    </div>
    <div class="division"></div>
    <!-- 滑动验证码 结束 -->
    <!-- video-dev 开始-->
    <div class="video">
      <button @click="cancelVideo">关闭调第一个啊啊啊啊啊</button>
      <button @click="show">啊啊啊啊</button>
      <!-- <button @click="show2">哈哈哈哈</button> -->
      <video
        ref="videoElement"
        id="videoElement"
        autoplay
        muted
        width="600"
        height="450"
      ></video>
      <!-- <video
        ref="videoElement1"
        id="videoElement1"
        autoplay
        muted
        width="600"
        height="450"
      ></video> -->
    </div>
    <!-- video-dev 结束-->
  </div>
</template>

<script>
import hlsjs from "hls.js";
export default {
  name: "Home",
  data() {
    return {
      msg: "",
      hlsjs: null
    };
  },
  mounted() {},
  components: {},
  methods: {
    cancelVideo() {
      if (this.hlsjs) {
        this.$refs.videoElement.pause();
        this.hlsjs.destroy();
        this.hlsjs = null;
      }
    },
    show() {
      let video = this.$refs.videoElement; //定义挂载点
      if (hlsjs.isSupported()) {
        this.hlsjs = new hlsjs();
        this.hlsjs.loadSource(
          "https://hls01open.ys7.com/openlive/6613561688b249f6ac0d29b26dc98391.m3u8"
        );
        this.hlsjs.attachMedia(video);
        this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => {
          console.log("加载成功");
          console.log("this.video", this.video);

          this.video.play();
        });
        this.hlsjs.on(hlsjs.Events.ERROR, (event, data) => {
          // console.log(event, data);
          // 监听出错事件
          console.log("加载失败");
        });
      } else {
        this.$message.error("不支持的格式");
        return;
      }
    },

    // -------------------------------- 图形验证码 (下)---------------------------
    onSuccess() {
      this.msg = "login success";
    },
    onFail() {
      this.msg = "";
    },
    onRefresh() {
      this.msg = "";
    }
    // -------------------------------- 图形验证码 (上)---------------------------
  }
};
</script>
<style scoped>
.video {
  width: 200px;
  height: 200px;
  background: #000;
}
.video video {
  width: 100%;
  height: 100%;
}
.division {
  width: 100%;
  height: 8px;
  margin: 10px 0;
  background: #000;
}
</style>
